<template>
  <!-- 上方主体 -->
  <b-col v-if="article.content != '0'">
    <!-- 封面图 -->
    <b-row>
      <b-col v-if="article.cover" class="rounded-top shadow-sm" :style="{background:'url('+article.cover+') no-repeat' ,backgroundSize:'100%',height:'135px',backgroundPosition:'0 -60px'}" />
    </b-row>
    <!-- 用户信息 -->
    <UserInfoView :key="article.id" :type="2" :user="article.user" />
    <!-- 标题 -->
    <b-row class="mt-2 title">
      <b-col>
        <h2>{{article.title}}</h2>
      </b-col>
    </b-row>
    <!-- 内容 -->
    <b-row class="mt-2">
      <div style="font-size:16px" class="col content" v-html="dataSet(article.content)" />
    </b-row>
    <!-- 署名和时间 -->
    <b-row class="mt-3 mb-2">
      <b-col style="font-size:15px" class="pr-1 col-auto text-muted">发布于 · {{getTime(article.time)}}</b-col>
      <b-col style="font-size:15px;color:#55a0dd" class="pl-0 pr-1 col-auto" > · {{article.zone}}</b-col>
      <b-col class="text-right">
        <span class="iconfont icon-browse mr-2"> {{article.view}}</span>
      </b-col>
    </b-row>
  </b-col>
</template>
<script>
import tool from '@/utils/tool';
import UserInfoView from '@/components/UserInfoView';
export default {
  components: {
    UserInfoView,
  },
  props: {
    id: String,
  },
  data() {
    return {
      //文章实体
      article: {
        content: "0",
        time: "",
        user: {
          name: "佚名",
        }
      },
      //传给父组件的内容
      content_pre: null,
    }
  },
  created() {
    //获取文章信息
    this.$httpIssue.getEntity(this.id, "article").then((res) => {
      this.article = res;
      document.title = "文章-" + res.title;
      this.content_pre = res.content;
    });

  },
  methods: {
    getTime(time) {
      return tool.transTime(time);
    },
    //设置html中的格式
    dataSet(data) {
      return data.replace("<img", "<img style='max-width:100%;'")
    }
  },
}
</script>
<style scoped>
.btn:focus {
  outline: none;
  box-shadow: none;
}
.content >>> .img {
  max-width: 400px;
  height: auto;
}
/* .title{
  border-bottom: solid 0.5px #f0f0f0;
} */
</style>
